<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

        <!--
            换行：<br />
            空格：&nbsp;
            大于号：&gt;
            小于号：&lt;
            标题：<h1 - h5></h1 - h5>
            段落表示（段落后有空行）：<p></p>
            块：<div></div>
            行内块：<span></span>
            强调：<em></em>（斜体）
            专业名词：<i></i>（斜体）
            关键字或产品名称：<b></b>（粗体）
            强调：<strong></strong>（粗体）
        -->

        <!--<img src="相对路径/绝对路径" alt="图片错误时显示的文字提示">-->
        <img src="../image/1.png">
        <br/>
        <!--连接标签-->
        <a href="https://www.baidu.com" title="鼠标放在图片上的提示">百度</a>

        <!--有序标签 显示123项 原点会被覆盖-->
        <ol>
            <li>学习h5</li>
            <li>学习css</li>
            <li>学习js</li>
        </ol>

        <!--无序标签 不会显示123序号-->
        <ul>
            <li><a href="#">新闻标题1</a></li>
            <li><a href="#">新闻标题2</a></li>
            <li><a href="#">新闻标题3</a></li>
            <li><a href="#">新闻标题4</a></li>
        </ul>

        <h1 id="biaoti2">标题2</h1>
        <a href="#biaoti1">标题1</a>
        <a href="#biaoti2">标题2</a>
        <a href="#biaoti3">标题3</a>
        <a href="#biaoti4">标题4</a>

        <!--自定义列表-->
        <dl>
            <dt>html</dt>
            <dd>负责页面结构</dd>

            <dt>css</dt>
            <dd>负责页面表现</dd>

            <dt>js</dt>
            <dd>负责页面行为</dd>
        </dl>

        <!--表格-->
        <table border="1" width="500" height="300">
            <tr>
                <th valign="bottom">序号</th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
            </tr>
            <tr>
                <td align="center">1</td>
                <td>苹果</td>
                <td>10</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>梨</td>
                <td>8</td>
                <td>10</td>
            </tr>
            <tr>
                <td>3</td>
                <td>香蕉</td>
                <td>5</td>
                <td>20</td>
            </tr>
        </table>
        <!--
        border 定义表格边框
        cellpadding 单元格内边距
        cellspacing 单元格间距离
        align 内容水平对齐方式 left center right
        valign 内容垂直对其方式 top middle bottom
        colspan 设置单元格水平合并
        rowspan 设置单元格垂直合并
        -->
        <table border="1" width="600" height="300">
            <tr>
                <th colspan="5" align="left">基本情况</th>
            </tr>
            <tr>
                <td width="18%">姓名</td>
                <td width="18%"></td>
                <td width="18%">性别</td>
                <td width="18%"></td>
                <td rowspan="5" width="28%"><img width="100" src="p" alt="图片"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>

            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>

            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>

            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>

            </tr>
        </table>

        <!--显示顶部-->
        <a href="#">回到顶部</a>
        或者
        <a href="">回到顶部</a>
    </body>
</html>